<template>




    <div class="function-container">

      <div class="function-container-back" v-on:click="backToPreviousPage">
        <img src="../../assets/images/house/return.png" alt="Return Icon" class="back-icon">
        返回
      </div>
      <div class="function-box" v-on:click="energy()">
        <img src="../../assets/images/function/energy.png" alt="energy Icon" class="function-image">
        <div class="function-number">能源监测</div>
      </div>
      <div class="function-box" v-on:click="health()">
        <img src="../../assets/images/function/health.png" alt="health Icon" class="function-image">
        <div class="function-number">健康与环境</div>
      </div>
      <div class="function-box" v-on:click="appliance()">
        <img src="../../assets/images/function/appliance.png" alt="appliance Icon" class="function-image">
        <div class="function-number">家电</div>
      </div>
    </div>

</template>

<script scoped>
import api from "@/api/family";

export default {
  name: "main",
  data() {
    return {
      familyData: {
        familyName:''
      },
    };
  },
  mounted() {
    this.getAll()
  },
  methods: {
    energy(){
      this.$router.push('/resource')
    },
    health(){
      this.$router.push('/environment')
    },
    appliance(){
      this.$router.push('/equipment')
    },
    backToPreviousPage() {
      this.$router.go(-1); // 返回上一页
    }
  }
}
</script>

<style  scoped>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  background: url('../../assets/images/login/background.jpg') no-repeat center center fixed;
  background-size: cover;
}
.function-container-back{
  position: absolute;
  top: -285px;
  left: -532px;
  display: flex;
  font-size: 18px; /* Slightly larger font size */
  color: white;
  cursor: pointer;
}
/* 返回按钮的样式 */
.back-link {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 18px; /* Slightly larger font size */
  color: white;
}

/* 返回图标的样式 */
.back-icon {
  height: 24px; /* Adjust the size as needed */
  width: 24px; /* Adjust the size as needed */
  margin-right: 8px; /* Space between icon and text */
}



.function-box {
  display: flex;
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  margin: 0 20px;
  cursor: pointer;
}
.function-image {
  width: 80%; /* Adjust the size as needed */
  height: auto;
  margin-top: 10px;
}
.function-number {
  font-size: 1.5em;
  margin-bottom: 10px;
}
.function-container {
  display: flex;
  margin-right: 10%;
  margin-top: 5%;
  position: absolute;
  top: 210px;
  left: 553px;
}
</style>
